<script lang="ts" setup>
import { BindTikTok, Drawer, List, ListItem, Search } from '@/components/business/user/info'
import Api from '@/api/'
import { reactive, ref } from 'vue'
import to from '@/utils/awaitTo'
import { message } from 'ant-design-vue'
import { ControlsCard } from '@/components/basic/Card'
import VirtualImages from '@/assets/images/virtual.webp'
import { SvgIcon } from '@/components/basic/icon'
import { Group } from '@/components/basic/Loading'
import { useI18n } from '@/hooks/useI18n'

// 实例化
const { t } = useI18n()

const queryParams = reactive({
  nickName: '',
  phone: '',
  identifying: 0,
  pageNum: 1,
  pageSize: 1000000
})
const list = ref([])
const loading = ref(false)
const getList = async () => {
  loading.value = true
  const [err, data] = await to(Api.user.userList(queryParams))
  loading.value = false
  if (!err) {
    console.log(data.rows)
    list.value = data.rows
  }
}


/** 抽屉功能 */
const open = ref(false)
const form = reactive({
  nickName: '',
  phonenumber: '',
  roleIds: [],
  status: '',
  hospitalId: '',
  classificationId: '',
  userId: '',
  avatar: '',
  subordinate: '',
  remark: '',
  menuIds: [],
  parentId: '0',
  password: '123456'
})
// 点击查看更多
const handleEdit = async (item) => {
  await getEchoInfo(item, (data) => {
    open.value = true
  })
}

/** 绑定抖音号功能 */
const tikTokOpen = ref(false)
const tiktokList = ref([])
const tiktokEchoList = ref([])
const handleBindTiktok = async (item) => {
  await getEchoInfo(item, async (data) => {
    const hospitalId = data.sysUser.hospitalId
    const [error, paramsData] = await to(Api.user.userEchoBindTikTok({ hospitalId }))
    if (!error) {
      tiktokList.value = paramsData
      tiktokEchoList.value = data.tiktokIds
      tikTokOpen.value = true
    }
  })
}

// 回显信息
const getEchoInfo = async (item, callback) => {
  const [error, data] = await to(Api.user.userEcho(item.userId))
  if (!error) {
    form.nickName = data.sysUser.nickName //用户名称
    form.phonenumber = data.sysUser.phonenumber //手机号码
    form.roleIds = data.roleIds //角色
    form.status = data.sysUser.status //账号状态
    form.hospitalId = data.sysUser.hospitalId //所属医院
    form.classificationId = data.sysUser.classificationId //所属科室
    form.userId = data.sysUser.userId //用户Id
    form.avatar = data.sysUser.avatar //头像
    form.subordinate = data.sysUser.subordinate // 添加子账号
    form.remark = data.sysUser.remark //备注
    form.menuIds = data.menuIds
    callback(data)
  }
}

// 更新权限
const getUserAuth = async () => {
  const [error] = await to(Api.user.userAuth())
  if (!error) {
    message.success('状态更新成功')
  }
}


// 回调
const callback = () => {
  getList()
  getUserAuth()
}

// 重置
const reset = () => {
  form.nickName = ''
  form.phonenumber = ''
  form.roleIds = []
  form.status = ''
  form.hospitalId = ''
  form.classificationId = ''
  form.userId = ''
  form.avatar = ''
  form.subordinate = ''
  form.remark = ''
  form.menuIds = []
  form.parentId = '0'
  form.password = '123456'
}

/** 新增用户方法 */
// 点击新增用户事件
const handleAddUser = () => {
  reset()
  open.value = true
}


/** menus操作 */
const OperationMenus = [
  {
    label: t('routes.user.form.bindTiktok'),
    key: '1',
    roles: ['101', '108'],
    icon: 'bindTiktok'
  }
]


getList()
</script>

<template>
  <div>
    <!-- 搜索列表 -->
    <Search :form="queryParams" @search="getList()" />


    <!-- 操作 -->
    <ControlsCard>
      <a-button type="primary" @click="handleAddUser">{{ $t('routes.user.addUser') }}</a-button>
      <a-button danger type="primary" @click="getUserAuth">{{ $t('routes.user.updateAuth') }}</a-button>
    </ControlsCard>

    <!-- 用户列表 -->
    <Group :is-empty="!list.length" :pending="loading">
      <List>
        <ListItem v-for="(item,index) in list" :key="index">
          <div class="mb-2">
            <a-image
              :fallback="VirtualImages"
              :height="80"
              :src="item.avatar ? item.avatar : ''"
              :width="80"
              class="rounded-full object-cover"
            />
          </div>
          <div class="font-medium text-lg line-clamp-1">
            <a-tooltip>
              <template #title>{{ item.nickName }}</template>
              {{ item.nickName }}
            </a-tooltip>
          </div>
          <div class="mt-3">
            {{ item.userName }}
          </div>
          <template #content>
            <div class="w-full h-full p-3">
              <a-space class="flex items-center">
                <div>{{ $t('routes.user.table.dep') }}</div>
                <div>{{ item.roleNames }}</div>
              </a-space>
              <a-space class="flex items-center mt-3">
                <div>{{ $t('routes.user.table.phone') }}</div>
                <div>{{ item.phonenumber }}</div>
              </a-space>
            </div>
          </template>

          <template #bottom>
            <div class=" flex justify-center items-center relative">
              <div class="btn" @click="handleEdit(item)">
                {{ $t('routes.user.table.editInfo') }}
              </div>
              <!--  更多操作  -->
              <a-dropdown placement="bottomLeft">
                <div class="absolute right-0 bottom-0">
                  <SvgIcon name="more" type="svg" />
                </div>
                <template #overlay>
                  <a-menu>
                    <a-menu-item
                      v-for="(record) in OperationMenus" :key="record.key"
                      :disabled="!record.roles.some(element => item.roleIds.includes(element))"
                      @click="handleBindTiktok(item)"
                    >
                      {{ record.label }}

                      <template #icon>
                        <svg-icon :name="record.icon" />
                      </template>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </template>
        </ListItem>
      </List>
    </Group>


    <!-- 新增修改 -->
    <Drawer v-model:open="open" :data="form" @callback="callback"></Drawer>


    <!-- 绑定抖音号 -->
    <BindTikTok v-model:open="tikTokOpen" :formData="form" :tiktokEchoList="tiktokEchoList"
                :tiktokList="tiktokList"></BindTikTok>

  </div>
</template>

<style lang="less" scoped>
.btn {
  width: 93px;
  height: 31px;
@apply bg-main rounded-lg text-white;
@apply flex justify-center items-center;
@apply cursor-pointer;
  //@apply hover:(bg-red text-white);
}
</style>
